<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简历分析结果 - SimpleHire</title>
    <style>
        /* 最高优先级禁用动画 */
        html *, html *:before, html *:after {
            animation: none !important;
            transition: none !important;
            transform: none !important;
            animation-duration: 0s !important;
            transition-duration: 0s !important;
            animation-delay: 0s !important;
            transition-delay: 0s !important;
            -webkit-animation: none !important;
            -webkit-transition: none !important;
            -moz-animation: none !important;
            -moz-transition: none !important;
            -o-animation: none !important;
            -o-transition: none !important;
            -ms-animation: none !important;
            -ms-transition: none !important;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary-color: #64748b;
            --success-color: #059669;
            --warning-color: #d97706;
            --danger-color: #dc2626;
            --light-bg: #f8fafc;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--light-bg);
            min-height: 100vh;
        }
        
        .navbar {
            background: white;
            box-shadow: var(--card-shadow);
        }
        
        .upload-area {
            border: 2px dashed #cbd5e1;
            border-radius: 16px;
            padding: 3rem;
            text-align: center;
            background: white;
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: var(--primary-color);
            background: #f8fafc;
        }
        
        .upload-area.dragover {
            border-color: var(--primary-color);
            background: #eff6ff;
        }
        
        .upload-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        
        .upload-area:hover .upload-icon {
            color: var(--primary-color);
        }
        
        .feature-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: var(--card-shadow);
            border: none;
            height: 100%;
        }
        
        .feature-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }
        
        .btn-primary {
            background: var(--primary-color);
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 500;
        }
        
        .btn-primary:hover {
            background: var(--primary-dark);
        }
        
        .progress {
            height: 8px;
            border-radius: 4px;
            background: #e2e8f0;
        }
        
        .progress-bar {
            border-radius: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--success-color));
        }
        
        .alert {
            border: none;
            border-radius: 12px;
            padding: 1rem 1.5rem;
        }
        
        .page-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 3rem 0;
            margin-bottom: 3rem;
        }
        
        .breadcrumb {
            background: transparent;
            padding: 0;
        }
        
        .breadcrumb-item a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }
        
        .breadcrumb-item.active {
            color: white;
        }
        
        /* 折叠按钮样式 */
        .btn-outline-primary.btn-sm {
            border-radius: 20px;
            padding: 0.25rem 0.75rem;
            font-size: 0.875rem;
        }
        
        /* 防止页面闪烁 */
        body {
            opacity: 1;
        }
        
        /* 限制页面高度，防止过度空白 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 减少不必要的间距 */
        .mb-5 {
            margin-bottom: 2rem !important;
        }
        
        /* 确保背景色一致 */
        .container {
            background: transparent;
        }
        
        /* 完全禁用折叠动画 */
        .collapse {
            transition: none !important;
        }
        
        .collapsing {
            transition: none !important;
            height: auto !important;
        }
        
        /* 禁用Bootstrap所有动画 */
        .fade {
            transition: none !important;
        }
        
        /* 页面布局优化 */
        .page-header {
            padding: 2rem 0 !important;
            margin-bottom: 2rem !important;
        }
        
        /* 减少卡片间距 */
        .feature-card {
            margin-bottom: 1rem;
        }
        
        /* 防止页面过高 */
        body {
            overflow-x: hidden;
        }
        
        /* 优化分析结果区域 */
        .row {
            margin-bottom: 1rem;
        }
        
        /* 完全禁用所有动画和过渡效果 */
        *, *::before, *::after {
            transition: none !important;
            animation: none !important;
            transform: none !important;
            animation-duration: 0s !important;
            animation-delay: 0s !important;
            transition-duration: 0s !important;
            transition-delay: 0s !important;
        }
        
        /* 禁用Bootstrap所有动画类 */
        .progress-bar, .fade, .collapse, .collapsing, .show, .showing, .hiding {
            transition: none !important;
            animation: none !important;
            animation-duration: 0s !important;
            transition-duration: 0s !important;
        }
        
        /* 强制禁用CSS动画 */
        @keyframes * {
            0%, 100% { opacity: 1; }
        }
        
        /* 固定页面高度，防止动态变化 */
        html, body {
            height: auto;
            overflow-x: hidden;
            scroll-behavior: auto !important;
        }
        
        /* 禁用所有可能的动画属性 */
        * {
            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
            -webkit-transition: none !important;
            -moz-transition: none !important;
            -o-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
        }
    </style>
</head>
<body style="animation: none !important; transition: none !important; transform: none !important;">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/" style="color: var(--primary-color);">
                <i class="fas fa-brain me-2"></i>
                SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link fw-500" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-500 active" href="/resume/analysis" style="color: var(--primary-color);">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-500" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-500" href="/job-matching">岗位匹配</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fw-500" href="/reports">报告中心</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面头部 -->
    <section class="page-header">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">简历分析</li>
                </ol>
            </nav>
            <h1 class="display-5 fw-bold mb-3">智能简历分析</h1>
            <p class="lead mb-0 opacity-90">上传您的简历，获得专业的AI分析和评分建议</p>
        </div>
    </section>

    <div class="container">
        <!-- 错误提示 -->
        <div th:if="${error}" class="alert alert-danger d-flex align-items-center mb-4" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <div th:text="${error}"></div>
        </div>
        
        <!-- 成功提示 -->
        <div th:if="${message}" class="alert alert-success d-flex align-items-center mb-4" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <div th:text="${message}"></div>
        </div>
                        
        <!-- 文件上传区域 -->
        <div th:if="${success == null or !success}" class="row mb-5">
            <div class="col-lg-8 mx-auto">
                <div class="feature-card">
                    <form id="uploadForm" action="/resume/upload" method="post" enctype="multipart/form-data">
                        <div class="upload-area" 
                             id="uploadArea"
                             ondrop="dropHandler(event);" 
                             ondragover="dragOverHandler(event);" 
                             ondragleave="dragLeaveHandler(event);"
                             onclick="document.getElementById('resumeFile').click()">
                            
                            <div class="upload-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            
                            <h5 class="fw-600 mb-3">拖拽文件到此处或点击选择</h5>
                            
                            <p class="text-muted mb-4">
                                支持 PDF、DOC、DOCX 格式，文件大小不超过 10MB
                            </p>
                            
                            <input type="file" 
                                   id="resumeFile" 
                                   name="resumeFile" 
                                   accept=".pdf,.doc,.docx" 
                                   class="d-none" 
                                   onchange="handleFileSelect(event)">
                            
                            <button type="button" 
                                    class="btn btn-primary btn-lg px-4" 
                                    onclick="event.stopPropagation(); document.getElementById('resumeFile').click()">
                                <i class="fas fa-upload me-2"></i>
                                选择文件
                            </button>
                        </div>
                        
                        <!-- 文件信息显示 -->
                        <div id="fileInfo" class="mt-4" style="display: none;">
                            <div class="d-flex align-items-center justify-content-between p-3 bg-light rounded-3">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-file-alt text-primary me-2"></i>
                                    <span id="fileName" class="fw-500"></span>
                                    <small class="text-muted ms-2" id="fileSize"></small>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFile()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 上传按钮 -->
                        <div class="text-center mt-4">
                            <button type="submit" 
                                    id="uploadBtn" 
                                    class="btn btn-primary btn-lg px-5" 
                                    disabled>
                                <i class="fas fa-rocket me-2"></i>
                                开始分析
                            </button>
                        </div>
                        
                        <!-- 进度条已禁用 -->
                        <div id="progressContainer" class="mt-4" style="display: none !important; visibility: hidden;">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 文本输入区域 -->
        <div th:if="${success == null or !success}" class="row mb-5">
            <div class="col-lg-8 mx-auto">
                <div class="feature-card">
                    <h4 class="fw-600 mb-4 text-center">或直接粘贴简历文本</h4>
                    <form action="/resume/analyze-text" method="post">
                        <div class="mb-4">
                            <textarea class="form-control" 
                                      id="resumeText" 
                                      name="resumeText" 
                                      rows="8" 
                                      placeholder="请粘贴您的简历文本内容..."
                                      style="border-radius: 12px; border: 2px solid #e2e8f0;"></textarea>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-5">
                                <i class="fas fa-rocket me-2"></i>
                                开始分析
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
                        
        <!-- 分析结果 -->
        <div th:if="${success != null and success}" class="row">
            <div class="col-lg-10 mx-auto">
                <div class="feature-card">
                    <h3 class="fw-bold mb-4 text-center">分析结果</h3>
                    
                    <!-- 文件信息 -->
                    <div th:if="${fileName}" class="alert alert-info d-flex align-items-center mb-4">
                        <i class="fas fa-file-alt me-2"></i>
                        <div>
                            <strong>文件:</strong> <span th:text="${fileName}"></span>
                        </div>
                    </div>
                    
                    <!-- 评分系统 -->
                    <div th:if="${structuredData != null && structuredData.scoring != null}" class="mb-5">
                        <h4 class="fw-600 mb-3"><i class="fas fa-chart-bar me-2"></i>综合评分</h4>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="feature-card text-center">
                                    <h2 class="text-primary mb-2" th:text="${structuredData.scoring.overallScore} + '分'"></h2>
                                    <p class="mb-0">总体评分</p>
                                    <div class="progress mt-2" style="height: 8px;">
                                        <div class="progress-bar bg-primary" role="progressbar" 
                                             th:style="'width: ' + ${structuredData.scoring.overallScore} + '%'"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="feature-card">
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <span>技术能力</span>
                                            <span class="badge bg-info" th:text="${structuredData.scoring.technicalSkills} + '分'"></span>
                                        </div>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-info" role="progressbar" 
                                                 th:style="'width: ' + ${structuredData.scoring.technicalSkills} + '%'"></div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <span>工作经验</span>
                                            <span class="badge bg-success" th:text="${structuredData.scoring.experience} + '分'"></span>
                                        </div>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-success" role="progressbar" 
                                                 th:style="'width: ' + ${structuredData.scoring.experience} + '%'"></div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <span>教育背景</span>
                                            <span class="badge bg-warning" th:text="${structuredData.scoring.education} + '分'"></span>
                                        </div>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-warning" role="progressbar" 
                                                 th:style="'width: ' + ${structuredData.scoring.education} + '%'"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                            <span>项目复杂度</span>
                                            <span class="badge bg-secondary" th:text="${structuredData.scoring.projectComplexity} + '分'"></span>
                                        </div>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-secondary" role="progressbar" 
                                                 th:style="'width: ' + ${structuredData.scoring.projectComplexity} + '%'"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="feature-card">
                                    <h6 class="text-center mb-3">能力雷达图</h6>
                                    <canvas id="skillRadarChart" width="200" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 结构化数据 -->
                    <div th:if="${structuredData}" class="mb-5">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="fw-600 mb-0"><i class="fas fa-user me-2"></i>基本信息</h4>
                            <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#basicInfoCollapse">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse show" id="basicInfoCollapse">
                            <div th:if="${structuredData != null && structuredData.basicInfo != null}" class="feature-card bg-light">
                            <div class="row">
                                <div th:if="${structuredData.basicInfo.name}" class="col-md-6 mb-2">
                                    <strong>姓名:</strong> <span th:text="${structuredData.basicInfo.name}"></span>
                                </div>
                                <div th:if="${structuredData.basicInfo.email}" class="col-md-6 mb-2">
                                    <strong>邮箱:</strong> <span th:text="${structuredData.basicInfo.email}"></span>
                                </div>
                                <div th:if="${structuredData.basicInfo.phone}" class="col-md-6 mb-2">
                                    <strong>电话:</strong> <span th:text="${structuredData.basicInfo.phone}"></span>
                                </div>
                                <div th:if="${structuredData.basicInfo.location}" class="col-md-6 mb-2">
                                    <strong>地址:</strong> <span th:text="${structuredData.basicInfo.location}"></span>
                                </div>
                                <div th:if="${structuredData.basicInfo.currentPosition}" class="col-md-6">
                                    <strong>当前职位:</strong> <span th:text="${structuredData.basicInfo.currentPosition}"></span>
                                </div>
                            </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mb-3 mt-4">
                            <h4 class="fw-600 mb-0"><i class="fas fa-code me-2"></i>技能总结</h4>
                            <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#skillsCollapse">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse show" id="skillsCollapse">
                            <div th:if="${structuredData != null && structuredData.skills != null}" class="feature-card bg-light">
                            <div th:if="${structuredData.skills.programmingLanguages}" class="mb-3">
                                <strong>编程语言:</strong><br>
                                <span th:each="skill, iterStat : ${structuredData.skills.programmingLanguages}">
                                    <span class="badge bg-primary me-1 mb-1" th:text="${skill}"></span>
                                </span>
                            </div>
                            <div th:if="${structuredData.skills.frameworks}" class="mb-3">
                                <strong>框架技术:</strong><br>
                                <span th:each="skill, iterStat : ${structuredData.skills.frameworks}">
                                    <span class="badge bg-success me-1 mb-1" th:text="${skill}"></span>
                                </span>
                            </div>
                            <div th:if="${structuredData.skills.databases}" class="mb-3">
                                <strong>数据库:</strong><br>
                                <span th:each="skill, iterStat : ${structuredData.skills.databases}">
                                    <span class="badge bg-info me-1 mb-1" th:text="${skill}"></span>
                                </span>
                            </div>
                            <div th:if="${structuredData.skills.tools}" class="mb-3">
                                <strong>开发工具:</strong><br>
                                <span th:each="skill, iterStat : ${structuredData.skills.tools}">
                                    <span class="badge bg-warning me-1 mb-1" th:text="${skill}"></span>
                                </span>
                            </div>
                            <div th:if="${structuredData.skills.softSkills}">
                                <strong>软技能:</strong><br>
                                <span th:each="skill, iterStat : ${structuredData.skills.softSkills}">
                                    <span class="badge bg-secondary me-1 mb-1" th:text="${skill}"></span>
                                </span>
                            </div>
                            </div>
                        </div>
                        
                        <!-- 项目经验 -->
                        <div th:if="${structuredData != null && structuredData.projects != null}" class="mt-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="fw-600 mb-0"><i class="fas fa-project-diagram me-2"></i>项目经验</h4>
                                <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#projectsCollapse">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                            <div class="collapse" id="projectsCollapse">
                            <div th:each="project : ${structuredData.projects}" class="feature-card bg-light mb-3">
                                <h5 th:text="${project.name}" class="text-primary"></h5>
                                <p th:text="${project.description}" class="mb-2"></p>
                                <div th:if="${project.technologies}" class="mb-2">
                                    <strong>技术栈:</strong>
                                    <span th:each="tech : ${project.technologies}">
                                        <span class="badge bg-dark me-1" th:text="${tech}"></span>
                                    </span>
                                </div>
                                <div th:if="${project.role}" class="mb-2">
                                    <strong>担任角色:</strong> <span th:text="${project.role}"></span>
                                </div>
                                <div th:if="${project.achievements}">
                                    <strong>项目成果:</strong> <span th:text="${project.achievements}"></span>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 深度分析 -->
                    <div th:if="${structuredData != null && structuredData.analysis != null}" class="mb-5">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="fw-600 mb-0"><i class="fas fa-brain me-2"></i>深度分析</h4>
                            <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#analysisCollapse">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse" id="analysisCollapse">
                        
                        <!-- 优势分析 -->
                        <div th:if="${structuredData.analysis.strengths}" class="mb-4">
                            <h5 class="text-success"><i class="fas fa-thumbs-up me-2"></i>核心优势</h5>
                            <div class="feature-card bg-light">
                                <ul class="mb-0">
                                    <li th:each="strength : ${structuredData.analysis.strengths}" th:text="${strength}"></li>
                                </ul>
                            </div>
                        </div>
                        
                        <!-- 改进建议 -->
                        <div th:if="${structuredData.analysis.recommendations}" class="mb-4">
                            <h5 class="text-warning"><i class="fas fa-lightbulb me-2"></i>改进建议</h5>
                            <div class="feature-card bg-light">
                                <ol class="mb-0">
                                    <li th:each="recommendation : ${structuredData.analysis.recommendations}" th:text="${recommendation}"></li>
                                </ol>
                            </div>
                        </div>
                        
                        <!-- 职业发展建议 -->
                        <div th:if="${structuredData.analysis.careerAdvice}" class="mb-4">
                            <h5 class="text-info"><i class="fas fa-route me-2"></i>职业发展建议</h5>
                            <div class="feature-card bg-light">
                                <p class="mb-0" th:text="${structuredData.analysis.careerAdvice}"></p>
                            </div>
                        </div>
                        
                        <!-- 市场价值评估 -->
                        <div th:if="${structuredData.analysis.marketValue}" class="mb-4">
                            <h5 class="text-primary"><i class="fas fa-chart-line me-2"></i>市场价值评估</h5>
                            <div class="feature-card bg-light">
                                <p class="mb-0" th:text="${structuredData.analysis.marketValue}"></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    
                    <!-- 风险评估 -->
                    <div th:if="${structuredData != null && structuredData.riskAssessment != null}" class="mb-5">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="fw-600 mb-0"><i class="fas fa-shield-alt me-2"></i>风险评估</h4>
                            <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#riskCollapse">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse" id="riskCollapse">
                        <div class="row">
                            <div th:if="${structuredData.riskAssessment.jobStability}" class="col-md-4 mb-3">
                                <div class="feature-card text-center">
                                    <h6 class="text-muted">工作稳定性</h6>
                                    <p class="mb-0" th:text="${structuredData.riskAssessment.jobStability}"></p>
                                </div>
                            </div>
                            <div th:if="${structuredData.riskAssessment.careerProgression}" class="col-md-4 mb-3">
                                <div class="feature-card text-center">
                                    <h6 class="text-muted">职业发展轨迹</h6>
                                    <p class="mb-0" th:text="${structuredData.riskAssessment.careerProgression}"></p>
                                </div>
                            </div>
                            <div th:if="${structuredData.riskAssessment.skillRelevance}" class="col-md-4 mb-3">
                                <div class="feature-card text-center">
                                    <h6 class="text-muted">技能相关性</h6>
                                    <p class="mb-0" th:text="${structuredData.riskAssessment.skillRelevance}"></p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    
                    <!-- AI分析 -->
                    <div th:if="${analysis}" class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="fw-600 mb-0">AI分析报告</h4>
                            <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#aiAnalysisCollapse">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse" id="aiAnalysisCollapse">
                            <div class="feature-card bg-light" style="white-space: pre-line;" th:text="${analysis}"></div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <a href="/resume/analysis" class="btn btn-primary btn-lg px-5">
                            <i class="fas fa-redo me-2"></i>
                            重新分析
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 减少底部空白 -->
        <div style="height: 2rem;"></div>
    </div>
    
    <!-- Bootstrap JS 已禁用以防止动画 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
    
    <script>
        // 文件上传相关的JavaScript函数
        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                showFileInfo(file);
                enableUploadButton();
            }
        }
        
        function dropHandler(event) {
            event.preventDefault();
            const uploadArea = document.getElementById('uploadArea');
            uploadArea.classList.remove('dragover');
            
            const files = event.dataTransfer.files;
            if (files.length > 0) {
                const file = files[0];
                // 验证文件类型
                const allowedTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword'];
                if (!allowedTypes.includes(file.type)) {
                    alert('请选择 PDF、DOC 或 DOCX 格式的文件');
                    return;
                }
                
                // 验证文件大小 (10MB)
                if (file.size > 10 * 1024 * 1024) {
                    alert('文件大小不能超过 10MB');
                    return;
                }
                
                // 设置文件到input
                const fileInput = document.getElementById('resumeFile');
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                fileInput.files = dataTransfer.files;
                
                showFileInfo(file);
                enableUploadButton();
            }
        }
        
        function dragOverHandler(event) {
            event.preventDefault();
            const uploadArea = document.getElementById('uploadArea');
            uploadArea.classList.add('dragover');
        }
        
        function dragLeaveHandler(event) {
            event.preventDefault();
            const uploadArea = document.getElementById('uploadArea');
            uploadArea.classList.remove('dragover');
        }
        
        function showFileInfo(file) {
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileInfo.style.display = 'block';
        }
        
        function removeFile() {
            const fileInput = document.getElementById('resumeFile');
            const fileInfo = document.getElementById('fileInfo');
            const uploadBtn = document.getElementById('uploadBtn');
            
            fileInput.value = '';
            fileInfo.style.display = 'none';
            uploadBtn.disabled = true;
        }
        
        function enableUploadButton() {
            const uploadBtn = document.getElementById('uploadBtn');
            uploadBtn.disabled = false;
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 初始化雷达图
        // 图表功能已禁用以防止动画
        function initSkillRadarChart() {
            // 图表已禁用
            return;
        }
        
        // 页面加载完成后的基本初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 防止页面自动滚动
            window.scrollTo(0, 0);
            
            // 完全禁用所有可能的动态元素
            const allElements = document.querySelectorAll('*');
            allElements.forEach(function(el) {
                el.style.animation = 'none';
                el.style.transition = 'none';
                el.style.transform = 'none';
            });
            
            // 强制显示所有内容
            const collapseElements = document.querySelectorAll('.collapse');
            collapseElements.forEach(function(collapseEl) {
                collapseEl.style.display = 'block';
                collapseEl.style.height = 'auto';
            });
        });
        
        // 表单提交处理
        const uploadForm = document.getElementById('uploadForm');
        if (uploadForm) {
            uploadForm.addEventListener('submit', function(e) {
                const fileInput = document.getElementById('resumeFile');
                if (!fileInput.files[0]) {
                    e.preventDefault();
                    alert('请先选择文件');
                    return;
                }
                
                // 禁用按钮，不显示进度条
                const uploadBtn = document.getElementById('uploadBtn');
                
                if (uploadBtn) {
                    uploadBtn.disabled = true;
                    uploadBtn.innerHTML = '<i class="fas fa-hourglass-half me-2"></i>分析中...';
                }
            });
        }
    </script>
</body>
</html>